<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-02-21 09:30:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-10-10 14:04:23
 * @FilePath: \vue3-progect\src\components\BaseCard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 基本card -->
<template>
	<div class="base_container">
		<el-card :body-style="bodyStyle">
			<div ref="cardEl" class="card_content">
				<slot></slot>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
defineProps({
	bodyStyle: { type: Object, default: () => ({}) }
});
const cardEl = ref();
defineExpose({ cardEl });
</script>

<style scoped lang="less">
.base_container {
	margin: 10px;
	height: calc(100% - 20px);
	min-height: 500px;
	.card_content {
		height: 100%;
	}
}
:deep(.el-card) {
	height: 100%;
}
:deep(.el-card__body) {
	height: 100%;
}
.no_padding {
	:deep(.el-card__body) {
		padding: 0;
	}
}
</style>
